<style lang="scss">
  .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .demo-spin-col{
        height: 100px;
        position: relative;
        border: 1px solid #eee;
    }
  .containers{
      text-align: center;
    background-color: #ffffff;
    width: 100%;
    height: 700px;
  }
    .canvas{
        z-index: 100;
        width: 100%;
        height: 100%;
    }
    .nodeSuccess:not(.djs-connection) .djs-visual > :nth-child(1) {
        stroke: red !important;
        stroke-width: 3px;
    }
</style>
<template>
  <Modal v-model="newValue" width="70%" @on-ok="newValue = false" title="任务处理概览" footer-hide>
    <Row>
      <Col>
      <Table row-key="id" :indent-size ="10" :load-data="handleLoadData"  border :columns="activitiColumns" :data="data" style="margin-right: 1px;">
        <template slot-scope="{ row, index }" slot="startTime">
          <span>{{row.startTime.substring(0,16)}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="endTime">
          <span>{{row.endTime != undefined && row.endTime != null ? row.endTime.substring(0,16): ""}}</span>
        </template>

        <template slot-scope="{ row, index }" slot="isOverTime">
          <span>{{row.isOverTime == 1?'是':'否'}}</span>
        </template>
        <template slot-scope="{ row, index }" slot="message">
          <span>{{row.message}}</span>
        </template>
      </Table>
      </Col>
    </Row>
    <Row style="position: relative;">
      <Col class="demo-spin-col" v-show="imageLoading">
      <Spin fix>
        <Icon type="ios-loading" size=18 class="demo-spin-icon-load"></Icon>
        <div>流程图片加载中...</div>
      </Spin>
      </Col>
      <div class="containers" ref="content">
        <div class="canvas" ref="canvas"></div>
      </div>
    </Row>
  </Modal>
</template>
<script>
  import BpmnViewer from 'bpmn-js/lib/Viewer'
  import Modeling from 'bpmn-js/lib/features/modeling/Modeling'
  import ajax from "../../ajax_util"
  import Axios from 'axios'
  import RuleProvider from 'diagram-js'

  export default {
    components: {

    },
    data() {
      return {
        imageLoading: false,
        imageUrl: "",
        activitiColumns: [
          {
            title: '节点名称',
            key: 'taskName',
            minWidth: 140,
            align: 'left',
            tree: true
          },
          {
            title: '审批人姓名',
            key: 'userName',
            width: 140,
            align: 'center',
          },
          {
            title: '开始时间',
            key: 'startTime',
            width: 160,
            align: 'center',
            slot: "startTime"
          },
          {
            title: '处理时间',
            key: 'endTime',
            width: 160,
            align: 'center',
            slot: "endTime"
          },
          {
            title: '是否超时',
            key: 'isOverTime',
            width: 100,
            align: 'center',
            slot: "isOverTime"
          },
          {
            title: '执行处理意见',
            key: 'message',
            align: 'left',
            minWidth: 161,
            slot: 'message',
          },
        ],
        data: [],
        bpmnXml: "",
        bpmnViewer: null
      }
    },
    created: function() {},
    methods: {
      handleLoadData (item, callback) {
        console.log("item------------->",item)
        var that = this;
        var url = this.CONFIG.base_url_test + '/son-pro-detail/' + item.reqId;
        ajax.get({
          url: url,
          that: that,
          success: function(data) {
            console.log("data-------->", data)
            var t = data
            var temp2 = []
            t.doneTasks.forEach((item, key) => {
              if (item.delegateList.length > 0) {
                item.delegateList.forEach((i, index) => {
                  if (i != null) {
                    console.log(i)
                    i.taskName = i.taskname
                    i.startTime = that.formatTime(i.start_time)
                    if (i.end_time != undefined && i.end_time != null) {
                      i.endTime = that.formatTime(i.end_time)
                    }
                    i.userName = i.assign
                    if (index == 0) {
                      i.message = +i.message
                    } else {
                      i.message = "处理转办; " + i.message
                    }
                    temp2.push(i)
                  }
                })
              }
              if (item.complaintList != null && item.complaintList.length > 0) {
                item.complaintList.forEach((i, index) => {
                  if (i != null) {
                    i.taskName = i.taskname
                    i.startTime = that.formatTime(i.start_time)
                    if (i.end_time != undefined && i.end_time != null) {
                      i.endTime = that.formatTime(i.end_time)
                    }
                    i.userName = i.assign
                    i.message = i.message
                    temp2.push(i)
                  }
                })
              }
              item.id = key + t.processInsId
              temp2.push(item)
            })
            if (t.waitTasks != undefined && t.waitTasks != null && t.waitTasks.length != 0) {
              t.waitTasks.forEach((item,key2) => {
                if (item.delegateList.length > 0) {
                  item.delegateList.forEach((i, index) => {
                    if (i != null) {
                      i.taskName = i.taskname
                      i.startTime = that.formatTime(i.start_time)
                      if (i.end_time != undefined && i.end_time != null) {
                        i.endTime = that.formatTime(i.end_time)
                      }
                      i.userName = i.assign
                      if (index == 0) {
                        i.message = i.message
                      } else {
                        i.message = "处理转办; " + i.message
                      }
                      temp2.push(i)
                    }
                  })
                }
                if (item.complaintList != null && item.complaintList.length > 0) {
                  item.complaintList.forEach((i, index) => {
                    if (i != null) {
                      i.taskName = i.taskname
                      i.startTime = that.formatTime(i.start_time)
                      if (i.end_time != undefined && i.end_time != null) {
                        i.endTime = that.formatTime(i.end_time)
                      }
                      i.userName = i.assign
                      i.message = i.message
                      temp2.push(i)
                    }
                  })
                }
                item.id = t.doneTasks.length + key2 + t.processInsId
                temp2.push(item)
              });
            }
            callback(temp2);
          }
        })
      },
      setTableData(value) {
        console.log("value---->",value)
        this.imageLoading = true
        var temp = JSON.stringify(value)
        var t = JSON.parse(temp)
        var temp2 = []
        t.doneTasks.forEach((item, key) => {
          if (item.delegateList.length > 0) {
            item.delegateList.forEach((i, index) => {
              if (i != null) {
                console.log(i)
                i.taskName = i.taskname
                i.startTime = this.formatTime(i.start_time)
                if (i.end_time != undefined && i.end_time != null) {
                  i.endTime = this.formatTime(i.end_time)
                }
                i.userName = i.assign
                if (index == 0) {
                  i.message = +i.message
                } else {
                  i.message = "处理转办; " + i.message
                }
                temp2.push(i)
              }
            })
          }
          if (item.complaintList != null && item.complaintList.length > 0) {
            item.complaintList.forEach((i, index) => {
              if (i != null) {
                i.taskName = i.taskname
                i.startTime = this.formatTime(i.start_time)
                if (i.end_time != undefined && i.end_time != null) {
                  i.endTime = this.formatTime(i.end_time)
                }
                i.userName = i.assign
                i.message = i.message
                temp2.push(i)
              }
            })
          }
          if(!this.utils.listIsEmpty(item.sons)){
            console.log("设置子工单---------------->",item.sons.length)
            item.children = []
            item.sons.forEach(i =>{
              var temp = {
                id: i.reqId,
                taskName: i.processName,
                userName: i.oriUserName,
                startTime: this.formatTime(i.startTime*1000),
                endTime: "",
                isOverTime: "",
                message: i.reqSubject,
                reqId: i.reqId,
                _loading: false,
                children: []
              }
              item.children.push(temp)
            })
            item._showChildren = true
          }
          item.id = key
          temp2.push(item)
        })
        if (t.waitTasks != undefined && t.waitTasks != null && t.waitTasks.length != 0) {
          t.waitTasks.forEach((item,key2) => {
            if (item.delegateList.length > 0) {
              item.delegateList.forEach((i, index) => {
                if (i != null) {
                  i.taskName = i.taskname
                  i.startTime = this.formatTime(i.start_time)
                  if (i.end_time != undefined && i.end_time != null) {
                    i.endTime = this.formatTime(i.end_time)
                  }
                  i.userName = i.assign
                  if (index == 0) {
                    i.message = i.message
                  } else {
                    i.message = "处理转办; " + i.message
                  }
                  temp2.push(i)
                }
              })
            }
            if (item.complaintList != null && item.complaintList.length > 0) {
              item.complaintList.forEach((i, index) => {
                if (i != null) {
                  i.taskName = i.taskname
                  i.startTime = this.formatTime(i.start_time)
                  if (i.end_time != undefined && i.end_time != null) {
                    i.endTime = this.formatTime(i.end_time)
                  }
                  i.userName = i.assign
                  i.message = i.message
                  temp2.push(i)
                }
              })
            }
            if(!this.utils.listIsEmpty(item.sons)){
              console.log("设置子工单22---------------->",item.sons.length)
              item.children = []
              item.sons.forEach(i =>{
                var temp = {
                  id: i.reqId,
                  taskName: i.processName,
                  userName: i.oriUserName,
                  startTime: this.formatTime(i.startTime*1000),
                  endTime: "",
                  isOverTime: "",
                  message: i.reqSubject,
                  reqId: i.reqId,
                  _loading: false,
                  children: []
                }
                item.children.push(temp)
              })
              item._showChildren = true
            }
            item.id = t.doneTasks.length + key2
            temp2.push(item)
          });
        }
        this.data = temp2
        console.log("temp2---->",temp2)
        // this.getImage()
        this.getBpmn()
      },
      getImage(value) {
        console.log("-getImage----->", this.processInfo.processInsId)
        if (this.imageUrl == '') {
          var that = this;
          var url = that.CONFIG.base_url_test + "/image/" + this.processInfo.processInsId
          Axios.get(url, {
            responseType: "arraybuffer",
          }).then(function(response) {
            return 'data:image/png;base64,' + btoa(
              new Uint8Array(response.data).reduce((data, byte) => data + String.fromCharCode(byte), '')
            );
          }).then(function(data) {
            that.imageUrl = data;
            that.imageLoading = false
          }).catch(function(err) {

          })
        } else {
          this.imageLoading = false
        }
      },
      getBpmn() {
        console.log(this.processInfo)
        if (this.bpmnXml == '') {
          var that = this;
          var url = this.CONFIG.base_url_test + '/bpmn-content/' + this.processInfo.processInsId;
          ajax.get({
            url: url,
            that: that,
            success: function(data) {
              // console.log("bpmnXml-------->", data)
              that.bpmnXml = data
              if (that.bpmnXml != '') {
                that.setBpmn()
              }
            }
          })
        } else {
          this.imageLoading = false
          // this.setBpmn()
        }
      },
      formatTime(time) {
        return this.utils.formatDate(new Date(time), "yyyy-MM-dd hh:mm")
      },
      setBpmn() {
        const canvas = this.$refs.canvas
        this.bpmnViewer = new BpmnViewer({
          container: canvas,
        });
        this.createNewDiagram(this.bpmnViewer);
      },
      createNewDiagram() {
        var that = this
        const bpmnXmlStr = this.bpmnXml
        this.bpmnViewer.importXML(bpmnXmlStr, function(err) {
          if (err) {
            console.error(err);
          } else {
            const canvas = that.bpmnViewer.get('canvas');
            canvas.zoom('fit-viewport');
            canvas.resized()
            var waitList = that.processInfo.waitTasks
            if (waitList.length > 0) {
              const nodeCodes = [];
              waitList.forEach(item => {
                nodeCodes.push(item.task_def_key)
              })
              const colorClass = 'nodeSuccess';
              that.setNodeColor(nodeCodes, colorClass, canvas);
            }
            that.imageLoading = false
          }
        })
      },
      setNodeColor(nodeCodes, colorClass, canvas) {
        for (let i = 0; i < nodeCodes.length; i++) {
          canvas.addMarker(nodeCodes[i], colorClass);
        }

      },
    },
    computed: {
      newValue: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      },
      datInfo() {
        return this.processInfo
      },


    },

    props: {
      processInfo: {},
      value: {},
    },
    watch: {
      processInfo(newVal, oldVal) {

      },
      newValue(newVal, oldVal) {
        console.log("-ewVal,oldVal---->", newVal, oldVal)
        if (newVal) {
          this.setTableData(this.processInfo)
        }
      }
    },
  }
</script>
